'use client';

import { useState } from 'react';
import { Layout } from 'antd';
import { TaskSidebar } from './preview/TaskSidebar';
import { ContentViewer } from './preview/ContentViewer';
import type { Course } from '@prisma/client';

const { Sider, Content } = Layout;

interface CoursePreviewProps {
  courseId: string;
  initialCourse: Course;
}

export function CoursePreview({ courseId, initialCourse }: CoursePreviewProps) {
  const [collapsed, setCollapsed] = useState(false);
  const [selectedId, setSelectedId] = useState<string>();
  const [selectedType, setSelectedType] = useState<'task' | 'step'>();

  const handleSelect = (id: string, type: 'task' | 'step') => {
    setSelectedId(id);
    setSelectedType(type);
  };

  return (
    <Layout className="h-full">
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        theme="light"
        width={300}
      >
        <TaskSidebar 
          courseId={courseId} 
          onSelect={handleSelect}
        />
      </Sider>
      <Content className="bg-white">
        <ContentViewer 
          courseId={courseId} 
          taskId={selectedType === 'task' ? selectedId : undefined}
          stepId={selectedType === 'step' ? selectedId : undefined}
        />
      </Content>
    </Layout>
  );
} 